<template>
  <view class="car">
    <view class="select">
      <uv-picker
        ref="picker"
        :columns="addressList"
        :loading="loading"
        keyName="name"
        @change="change"
        @confirm="confirm"
      >
      </uv-picker>
      <view @click="open" class="dizhi"
        >{{ dizhi }}<uv-icon name="arrow-down" size="14"></uv-icon
      ></view>
      <!-- <button @click="open">打开</button> -->
      <uv-search
        placeholder="请输入您的搜索的内容"
        shape="round"
        :showAction="false"
      ></uv-search>
    </view>
    <view class="car-box1">
      <view class="box1-top">
        <view class="font">奥迪A6 2020款 豪华动感型</view>
        <view class="img"><image src="/static/carlist-right.png"></image></view>
      </view>
      <view class="box1-center">
        <view class="center-content" v-for="item in list" :key="item.id">
          <image :src="item.img"></image>
          <view class="font">{{ item.title }}</view>
        </view>
      </view>
      <view class="box1-bottom">
        <view class="bottom-left">
          <image src="/static/优惠券.png"></image>
          <view class="font"> 您有<text>2</text>张工时费抵扣券待使用 </view>
        </view>
        <view class="bottom-right">
          <image src="/static/carlist-right.png"></image>
        </view>
      </view>
    </view>
    <view class="car-box2">
      <view class="box2-top">
        <view class="top-left"> 附近好店 </view>
        <view class="top-right">
          查看更多
          <image src="/static/carlist-right.png"></image>
        </view>
      </view>
      <view class="content" v-for="item in 3" :key="item">
        <view class="content-top">
          <view class="content-left">
            <image src="/static/car.png"></image>
          </view>
          <view class="content-right">
            <view class="cright-top">
              <view class="top-left">鑫日汽修厂</view>
              <view class="top-right">1.2km</view>
            </view>
            <view class="cright-center">
              <uv-rate
                size="16"
                :count="count"
                activeColor="#ffb800"
                v-model="value"
              ></uv-rate>
              <text>服务次数：235</text>
            </view>
            <view class="cright-center1">
              山东省临沂市河东区香港路与长安路东100米鑫日汽修厂
            </view>
            <view class="cright-bottom">
              <view class="neirong">洗车</view>
              <view class="neirong">美容</view>
              <view class="neirong">维修</view>
              <view class="neirong">轮胎</view>
              <view class="neirong">保养</view>
              <view class="neirong">改装</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="car-box3">
      <image src="/static/car1.jpg"></image>
    </view>
    <view class="car-box4">
      <view class="content">
        <view class="content-top">
          <uv-tabs :list="contentList" lineColor="#fc4424" lineHeight="5"></uv-tabs>
        </view>
        <view class="content-neirong">
          <business></business>
          <business></business>
          <business></business>
          <business></business>
          <business></business>
          <business></business>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import business from "../../components/business.vue";
export default {
  components: {
    business,
  },
  data() {
    return {
      count: 5,
      value: 4,
      loading: true,
      provinces: [], //省
      citys: [], //市
      areas: [], //区
      pickerValue: [0, 0, 0],
      defaultValue: [3442, 1, 2],
      dizhi: "泰安市",
      list: [
        { id: 1, img: "/static/机油.png", title: "做保养" },
        { id: 2, img: "/static/轮胎.png", title: "换轮胎" },
        { id: 3, img: "/static/跑车.png", title: "汽车服务" },
        { id: 4, img: "/static/汽车.png", title: "汽车美容" },
      ],
      contentList: [
        {
          name: "推荐",
        },
        {
          name: "小保养",
        },
        {
          name: "保养搭配推荐",
        },
        {
          name: "制动系统",
        },
        {
          name: "冷却系统",
        },
      ],
    };
  },
  methods: {
    getData() {
      uni.request({
        method: "GET",
        url: "/static/regions.json",
        success: (res) => {
          const { statusCode, data } = res;
          if (statusCode === 200) {
            console.log("获取的数据：", res);
            // this.dizhi = res.data.value.name
            this.provinces = data.sort((left, right) =>
              Number(left.code) > Number(right.code) ? 1 : -1
            );
            console.log(this.provinces);
            this.handlePickValueDefault();
            setTimeout(() => {
              this.loading = false;
            }, 200);
          }
        },
      });
    },
    handlePickValueDefault() {
      // 设置省
      this.pickerValue[0] = this.provinces.findIndex(
        (item) => Number(item.id) === this.defaultValue[0]
      );
      // 设置市
      this.citys = this.provinces[this.pickerValue[0]]?.children || [];
      this.pickerValue[1] = this.citys.findIndex(
        (item) => Number(item.id) === this.defaultValue[1]
      );
      // 设置区
      this.areas = this.citys[this.pickerValue[1]]?.children || [];
      this.pickerValue[2] = this.areas.findIndex(
        (item) => Number(item.id) === this.defaultValue[2]
      );
      // 重置下位置
      this.$refs.picker.setIndexs(
        [this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]],
        true
      );
    },
    change(e) {
      if (this.loading) return;
      console.log(e);
      const { columnIndex, index, indexs } = e;
      // 改变了省
      if (columnIndex === 0) {
        this.citys = this.provinces[index]?.children || [];
        this.areas = this.citys[0]?.children || [];
        this.$refs.picker.setIndexs([index, 0, 0], true);
      } else if (columnIndex === 1) {
        this.areas = this.citys[index]?.children || [];
        this.$refs.picker.setIndexs(indexs, true);
      }
    },
    open() {
      this.$refs.picker.open();
      this.handlePickValueDefault();
    },
    confirm(e) {
      console.log("确认选择的地区：", e);
      this.dizhi = e.value[2].name;
      // uni.showToast({
      //   icon: "none",
      //   title: `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`,
      // });
    },
  },
  created() {
    this.getData();
  },
  computed: {
    addressList() {
      return [this.provinces, this.citys, this.areas];
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
}
.car {
  height: 400rpx;
  background: linear-gradient(#fc4424, #f99482, #f5e7e5);
  .select {
    display: flex;
    width: 90%;
    margin: auto;
    background-color: #f5f5f5;
    border-radius: 50px;
    .dizhi {
      padding: 16rpx;
      display: flex;
      align-items: center;
    }
  }
  .car-box1 {
    width: 90%;
    margin: auto;
    margin-top: 40rpx;
    border-radius: 20rpx;
    overflow: hidden;
    .box1-top {
      padding: 20rpx;
      display: flex;
      background-color: #ffeae7;
      align-items: center;
      justify-content: space-between;
      color: #fc3a19;
      .img {
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
    .box1-center {
      display: flex;
      justify-content: space-around;
      text-align: center;
      padding-top: 40rpx;
      padding-bottom: 40rpx;
      align-content: center;
      background-color: #fff;
      .center-content {
        image {
          width: 80rpx;
          height: 80rpx;
          margin-bottom: 10rpx;
        }
      }
    }
    .box1-bottom {
      display: flex;
      background-color: #fff;
      justify-content: space-between;
      padding: 20rpx;
      align-items: center;
      image {
        height: 40rpx;
        width: 40rpx;
      }
      .bottom-left {
        display: flex;
        .font {
          margin-left: 10rpx;
          text {
            color: #fc4424;
            padding: 5rpx;
          }
        }
      }
    }
  }
  .car-box2 {
    width: 90%;
    margin: auto;
    background-color: #fff;
    margin-top: 40rpx;
    border-radius: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;

    .box2-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .top-right {
        display: flex;
        align-items: center;
        color: #adadad;
      }
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
    .content {
      box-sizing: border-box;
      background-color: #fff;
      // border-radius: 10px;
      margin-top: 20rpx;
      .content-top {
        display: flex;
        justify-content: space-between;
        .content-left {
          width: 30%;
          border-radius: 10rpx;
          overflow: hidden;
          image {
            width: 100%;
            height: 180rpx;
          }
        }
        .content-right {
          // position: relative;
          width: 65%;
          .cright-top {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            font-size: 34rpx;
            .top-right {
              color: #787878;
              font-weight: 400;
              font-size: 26rpx;
            }
          }
          .cright-center {
            display: flex;
            font-size: 26rpx;

            color: #b7b7b7;
            margin-top: 10rpx;
            text {
              margin-left: 20rpx;
            }
          }
          .cright-center1 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 26rpx;
            margin-top: 10rpx;
            color: #868686;
          }
          .cright-bottom {
            display: flex;
            font-size: 24rpx;
            // position: absolute;
            bottom: 0;
            .neirong {
              background-color: #ffece9;
              margin-right: 10rpx;
              color: #fd7158;
              width: 60rpx;
              text-align: center;
              border-radius: 10rpx;
              height: 40rpx;
              line-height: 40rpx;
            }
          }
        }
      }
    }
  }
  .car-box3 {
    width: 90%;
    margin: auto;
    margin-top: 40rpx;
    border-radius: 20rpx;
    overflow: hidden;
    height: 300rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .car-box4 {
    width: 90%;
    margin: auto;
    .content {
      .content-neirong {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
    }
  }
}
</style>
